<template>
  <div>
    <el-card style="margin:0 0 10px 0">
      <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(setDefaultTime)"
        @changeTime="changeTime"
        :loading="tableLoading"
        download
        @download="download">
      </mer-search>
      <div class="tips">注：最多支持60天查询</div>
    </el-card>

    <el-card style="margin: 20px 0 10px" shadow="never">
      <div class="sum-wrapper">
        <div class="sum-item sum-item-1">
          <div class="value">{{sumInfo.allTotalAmountGun || 0 | formatMoney}}</div>
          <div class="label">收款总金额（元）</div>
        </div>
        <div class="sum-item sum-item-2">
          <div class="value">{{sumInfo.allTotalOrderNum || 0 | formatMoney}}</div>
          <div class="label">订单总数（单）</div>
        </div>
        <div class="sum-item sum-item-3">
          <div class="value">{{sumInfo.allTotalSumLitre || 0 | formatMoney}}</div>
          <div class="label">总升数（升）</div>
        </div>
        <div class="sum-item sum-item-4" v-for="item in sumInfo.totalLitreByOilList" :key="item.oilNo">
          <div class="value">{{item.totalSumLitre || 0 | formatMoney}}</div>
          <div class="label">{{ item.oilNo }}# 总升数（升）</div>
        </div>
      </div>
    </el-card>

    <el-card>
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange">
      </mer-table>
    </el-card>
  </div>
</template>
<script>
import moment from 'moment'
import listPage from '@/mixins/listPage'
import { getQueryGasList, searchChainOrderList, exportFileApi, queryChainOrderSum } from '@/api/order'

// 表单参数配置
let formConfig = [
  { label: '油站', type: 'select', modelName: 'gasId', selectOptions: [], define: true, selectLabel: 'gasName', selectValue: 'gasId', filterable: true },
  { label: '支付时间', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss', clearable:false }
]
// 表格参数配置
let tableConfig = [
  { label: '油站名称', prop: 'gasName' },
  { label: '油站收款金额', prop: 'totalAmountGun' },
  { label: '汽油收款金额', prop: 'gasOlineAmountGun' },
  { label: '汽油优惠金额', prop: 'gasOlineAmountRebate' },
  { label: '柴油收款金额', prop: 'dieselOilAmountGun' },
  { label: '柴油优惠金额', prop: 'dieselOilAmountRebate' },
  { label: '天然气收款金额', prop: 'naturalGasAmountGun' },
  { label: '天然气优惠金额', prop: 'naturalGasAmountRebate'},
  { label: '升数', prop: 'totalSumLitre'},
  { label: '付款订单数', prop: 'totalOrderNum'},
  { label: '退款订单数', prop: 'totalRefundOrderNum'},
]

export default {
  name: 'chainOrderSummary',
  mixins: [listPage],
  data () {
    return {
      formConfig,
      tableConfig
    }
  },
  methods: {
    download () {
      this.downloadFile(exportFileApi, 'name')
    },
    async searchGasList () {
      try {
        const { code, result } = await getQueryGasList()
        if (code !== 200) return
        this.formConfig[this.findConfigIndex(this.formConfig, 'gasId')].selectOptions = result.map(item => ({
          gasName: item.gasName,
          gasId: item.gasId
        }))
      } catch (err) {
        console.log(err)
      }
    },
    changeTime (val) {
      if ((new Date(val[1]) - new Date(val[0])) / (24 * 3600 * 1000) > 60) {
        this.setDefaultTime()
        this.$message.error('最多支持查询60天！')
      } else {
        this.searchBar.startTime = val[0]
        this.searchBar.endTime = val[1]
      }
    },
    // 设置初始时间
    setDefaultTime () {
      this.searchBar.startTime = moment().subtract(59, "days").format('YYYY-MM-DD hh:mm:ss')
      this.searchBar.endTime = moment().format('YYYY-MM-DD hh:mm:ss')
      this.formConfig[this.findConfigIndex(this.formConfig, 'tradeTime')].model = [this.searchBar.startTime, this.searchBar.endTime]
    }
  },
  created () {
    this.setDefaultTime()
    this.searchGasList()
    this.initList(searchChainOrderList, true, queryChainOrderSum)
  }
}
</script>
<style lang="less" scoped>
.tips {
  font-size: 14px;
  color: rgb(121, 117, 117);
}
</style>
